<template>
<Title>{{guideTitle}}</Title>
<NuxtLayout name="guide">
  <template #head>
    <div class="head">
      <div class="logo">
        <img src="@/assets/img/guide/logo.png" alt="">
      </div>
      <div class="nav">
        <NuxtLink :key="index" :to="item.to" v-for="(item, index) in guideMenu">
          <i class="fa" :class="item.icon"></i>
          <span>{{item.title}}</span>
        </NuxtLink>
      </div>
    </div>
  </template>
  <template #middle>
    <div class="middle">
      <h1>这是小雪花的博客,MyBlog</h1>
      <div class="login">
        <NuxtLink to="#">
          <span>注册</span>
        </NuxtLink>
        <NuxtLink to="/login">
          <span>登录</span>
        </NuxtLink>
      </div>
    </div>
  </template>
  <template #footer>
    <div class="footer">
        <NuxtLink
        v-for="(item, index) in guideIcon"
        :key="index"
        class="fa"
        :class="item.icon"
        :title="item.title"
        :href="item.to">
        </NuxtLink>
    </div>
  </template>
</NuxtLayout>
</template>
<script setup>
import { guideTitle } from '@/config/base.js'
import { ElMessage } from 'element-plus'
import { NuxtLink } from '~~/.nuxt/components';
const $router = useRouter()
// 首页检查用户有没有登录状态
const findUserState = () => {
  const userData = JSON.parse(localStorage.getItem('userData'))
  if (userData) {
    ElMessage({
      message: '检测到您曾经登陆过,正在为您跳转到主页',
      type: 'success',
    })
    // 存在登录状态对页面进行跳转
    $router.push({
      path: '/home'
    })
  }
}
// 菜单部分的数据
const guideMenu = reactive([
  {
    title: '主页',
    icon: 'fa-home',
    to: '#'
  },
  {
    title: '关于',
    icon: 'fa-user-circle-o',
    to: '#'
  }
])
// 页面底部ICON数据
const guideIcon = reactive([
  {
    icon: 'fa-qq',
    to: '#',
    title: '1006084794'
  },
  {
    icon: 'fa-weixin',
    to: '#',
    title: 'myy233'
  },
  {
    icon: 'fa-github',
    to: '#',
    title: '我的Github'
  }
])
onMounted(() => {
  findUserState()
})
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  width: 85%;
  color: var(--guide-text-default-color);
  .logo {
    display: flex;
    align-items: center;
    img {
      width: 122px;
      height: 31px;
    }
  }
  .nav {
    margin-left: auto;
    display: flex;
    >a {
      padding: 0 12px 0 12px;
      display: flex;
      color: var(--guide-text-default-color);
      align-items: center;
      cursor: pointer;
      text-decoration: none;
      &:hover {
        color: var(--guide-text-hover-color);
        transition-delay: 150ms;
        transition-duration: 500ms;
      }
      >i {
        font-size: 24px;
        margin-right: 6px;
      }
    }
  }
}
.middle {
  color: var(--guide-text-default-color);
  width: 100%;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 32px;
  }
  .login {
    display: flex;
    a {
      color: var(--guide-text-default-color);
      text-decoration: none;
      border: 1px solid var(--guide-text-default-color);
      margin-left: 10px;
      font-size: 18px;
      padding: 4px 24px 4px 24px;
      border-radius: 18px;
      transition-delay: 150ms;
      transition-duration: 500ms;
      &:hover {
        color: var(--guide-text-hover-color);
        border: 1px solid var(--guide-text-hover-color);
      }
      &:nth-of-type(1) {
        margin-left: 0;
      }
    }
  }
}
.footer {
  display: flex;
  width: 100%;
  justify-content: center;
  a {
    display: inline-block;
    color: white;
    text-decoration: none;
    margin: 0 8px 0 8px;
    font-size: 22px;
    transition-delay: 150ms;
    transition-duration: 500ms;
    &:hover {
      color: var(--guide-text-hover-color);
    }
  }
}
</style>
